 import { getParkInfoAPI } from "@/apis/screenApi"
import { ref } from "vue"
import * as echarts from 'echarts'

// 获取数据
export  const  getScrceList = () => {
    const info = ref({})
    const getList = async () =>{
        const scrceList = await getParkInfoAPI()
        info.value = scrceList.data.data
    }
    return {
        info,
        getList
    }
}

// 年度收入分析
export const yearArress = (info)  => {
    const barChart = ref(null)
    const getYearscren = () =>{
         // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(barChart.value);

    const { parkIncome } = info.value
    
      // 指定图表的配置项和数据
      const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            },
          },
        grid:{
            // 让图表占满容器
            top: '10px',
            left: '0px',
            right: '0px',
            bottom: '0px',
            containLabel: true,
        },
        xAxis:[
            {
                type: 'category',
                axisTick: {
                  alignWithLabel: true,
                  show: false,
                },
                data: parkIncome.xMonth,
            },
        ],
        yAxis:[
            {
                type: 'value',
                splitLine: {
                  show: false,
                },
            },
        ],
        series: [
          {
            name: '销量',
            type: 'bar',
            data:parkIncome.yIncome
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);

      window.addEventListener('resize', () => {
        myChart.resize()
      })
    }

    return {
        barChart,
        getYearscren
    }
}

// 园区产业分析
export const parkInfo = (info) =>{
    const pieChart = ref(null)

    const getparkInfoList = () =>{
        const { parkIndustry } = info.value

        const myChart = echarts.init(pieChart.value);

        const option = {
            color: [
              '#00B2FF', '#2CF2FF', '#892CFF', '#FF624D', '#FFCF54', '#86ECA2'],
            legend: {
              itemGap: 20,
              bottom: '0',
              icon: 'rect',
              itemHeight: 10, // 图例icon高度
              itemWidth: 10, // 图例icon宽度
              textStyle: {
                color: '#c6d1db',
              },
            },
            tooltip: {
              trigger: 'item'
            },
            series: [
              {
                name: '园区产业分析',
                type: 'pie',
                radius: ['55%', '60%'], // 设置内圈与外圈的半径使其呈现为环形
                center: ['50%', '40%'], // 圆心位置， 用于调整整个图的位置
                tooltip: {
                  trigger: 'item',
                  formatter: (params) => {
                    return `${params.seriesName}</br><div style='display:flex;justify-content: space-between;'><div>${params.marker}${params.name}</div><div>${params.percent}%</div></div>`
      
                  }
                },
                label: {
                  show: false,
                  position: 'center',
                },
                data: parkIndustry,
              },
            ],
      
          }

        myChart.setOption(option)

        
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    }

    return {
        pieChart,
        getparkInfoList
    }
}